<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->  <html class="no-js" lang="en"> <!--<![endif]-->
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	
	<title>template method</title>
	
	<meta name="description" content="A jQuery library for modern HTML presentations">
	<meta name="author" content="Caleb Troughton">
	<meta name="viewport" content="width=1024, user-scalable=no">
	
	<!-- Core and extension CSS files -->
	<link rel="stylesheet" href="../core/deck.core.css">
	<link rel="stylesheet" href="../extensions/goto/deck.goto.css">
	<link rel="stylesheet" href="../extensions/menu/deck.menu.css">
	<link rel="stylesheet" href="../extensions/navigation/deck.navigation.css">
	<link rel="stylesheet" href="../extensions/status/deck.status.css">
	<link rel="stylesheet" href="../extensions/hash/deck.hash.css">
	<link rel="stylesheet" href="../extensions/scale/deck.scale.css">
	
	<!-- Style theme. More available in /themes/style/ or create your own. -->
	<link rel="stylesheet" href="../themes/style/swiss.css">
	
	<!-- Transition theme. More available in /themes/transition/ or create your own. -->
	<link rel="stylesheet" href="../themes/transition/horizontal-slide.css">
	
	<script src="../modernizr.custom.js"></script>
	

    <!-- SintaxHighlighter -->
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>SyntaxHighlighter Large File Demo</title>
	<script type="text/javascript" src="../SyntaxHighlighter-master/scripts/XRegExp.js"></script>
	<script type="text/javascript" src="../SyntaxHighlighter-master/scripts/shCore.js"></script>
	<script type="text/javascript" src="../SyntaxHighlighter-master/scripts/shBrushJava.js"></script>
	<script type="text/javascript" src="../SyntaxHighlighter-master/scripts/shBrushPlain.js"></script>
	<script type="text/javascript" src="../SyntaxHighlighter-master/scripts/shBrushPython.js"></script>
	<link type="text/css" rel="stylesheet" href="../SyntaxHighlighter-master/styles/shCoreEclipse.css"/>
	<!--link type="text/css" rel="stylesheet" href="../SyntaxHighlighter-master/styles/shThemeEclipse.css"/-->
	
	<script type="text/javascript">SyntaxHighlighter.all();</script>

	
	
</head>

<body class="deck-container">

<!-- Begin slides -->
<section class="slide" id="template1">
	<h2>Template Method</h2>
	<h4>Vamos a encapsular pedasos de algortimos en una clase para que sus subclases puedan hacer uso de estas</h4>
	<p><strong>Receta de café</strong></p>
	<ol>
		<li>Hervimos el agua</li>
		<li>Tiramos café en el aguar hirviendo y la filtamos</li>
		<li>Ponemos la infusion en una taza</li>
		<li>Agregamos azucar y leche</li>
	</ol>
	<p><strong>Receta de té</strong></p>
	<ol>
		<li>Hervimos el agua</li>
		<li>Ponemos el saquito de té en el agua hirviendo</li>
		<li>Ponemos la infusion en una taza</li>
		<li>Agregamos limón y azucar</li>
	</ol>
</section>
<section class="slide" id="template2">
	<h2>Template Method</h2>
	<h4>Unificamos las recetas</h4>
	<p>Si bien las recetas no son exactamente iguales podemos encotrar la corelacion de los pasos</p>
	<ul>
		<li>Tiramos cafe en el aguar hirviendo, o lo pasamos por el filtro</li>
		<li>Ponemos el saquito de té en el aguar hirviendo</li>
	</ul>
	<p>se puede generalizar como: Agregamos el ingrediente de la infusion en el agua hirviendo</p><BR/>
	<p>Si bien las recetas no son exactamente iguales podemos encotrar la corelacion de los pasos</p>
	<ul>
		<li>Agregamos azucar y leche</li>
		<li>Agregamos limón y azucar</li>
	</ul>
	<p>se puede generalizar como:  Agregamos los condimentos</p><BR/>

	<p><strong>Los pasos para hacer té o café quedarian:</strong></p>
	<ol>
		<li>Hervimos el agua</li>
		<li>Agregamos el ingrediente de la infusion en el agua hirviendo</li>
		<li>Ponemos la infusion en una taza</li>
		<li>Agregamos los condimentos</li>
	</ol>
</section>
<section class="slide" id="template3">
	<h2>Template Method</h2>
	<p><strong>Los pasos para hacer té o café en código:</strong></p>
	<script type="syntaxhighlighter" class="brush: java; toolbar: false;">
	void prepareRecipe() {
		boilWater();
		brew();
		pourInCup();
		addCondiments();
	}
	</script>
	<p>Como los pasos brew() y addCondiments() son una generalización, vamos a implementarlos en las sublcases Tea y Coffee</p>
	<p><strong>Así quedaría el diagrama de clases</strong></p>
	<img src="teaCaffeeClassDiagram.png"/>
</section>

<section class="slide" id="template4">
	<h2>Template Method</h2>
	<h4>Implementación</h4>
	<p>Implementamos la clase padre</p>
	<script type="syntaxhighlighter" class="brush: java; toolbar: false;">
		public abstract class CaffeineBeverage {
		  
			final void prepareRecipe() {
				boilWater();
				brew();
				pourInCup();
				addCondiments();
			}
		 
			abstract void brew();
		  
			abstract void addCondiments();
		 
			void boilWater() {
				System.out.println("Boiling water");
			}
		  
			void pourInCup() {
				System.out.println("Pouring into cup");
			}
		}
	</script>
	<li>El método prepareRecipe() va a ser usado por las 2 subclases Tea y Coffee. Esta declarado final para que las subclases no lo puedan sobreescribirlo, y cambiar los pasos de la receta.</li>
	<li>brew() y addCondiments() como los generalizamos los declaramos abstractos y dejamos que las sublclases se encarguen de ellos.</li>
	<li>boilWater() y pourInCup() los implementamos aca porque son iguales en infusiones</li>
</section>
<section class="slide" id="template5">
	<h2>Template Method</h2>
	<h4>Implementación</h4>
	<p>Implementamos los métodos que faltan de las clases Coffee y Tea</p>
	<script type="syntaxhighlighter" class="brush: java; toolbar: false;">
		public class Coffee extends CaffeineBeverage {
			public void brew() {
				System.out.println("Dripping Coffee through filter");
			}
			public void addCondiments() {
				System.out.println("Adding Sugar and Milk");
			}
		}
	</script>
	<script type="syntaxhighlighter" class="brush: java; toolbar: false;">
		public class Tea extends CaffeineBeverage {
			public void brew() {
				System.out.println("Steeping the tea");
			}
			public void addCondiments() {
				System.out.println("Adding Lemon");
			}
		}
	</script>
</section>
<section class="slide" id="template6">
	<h2>Template Method</h2>
	<p>Lo que tenemos implementado es un tempalte method</p>
	<p>prepareRecipe() es el template method</p>
	<ul>
		<li>Sirve de plantilla o estructura para un algoritmo</li>
		<li>En el template cada paso del algoritmo esta representado por un método</li>
		<li>Algunos están implementados y otros serán implementados por las subclases</li>
	</ul>
</section>

<section class="slide" id="template7">
	<h2>Template Method</h2>
	<h3>Hooked</h3>
	<p>Un hook es un método declarado en la clase abstracta, pero tiene una implemetación default o vacía. Esto le da a las subclases la capacidad de engancharese "hook into" al algoritmo en varios puntos, si es que la subclase quiere hacerlo, porque la subclase puede también ignorar el hook</p>
	<script type="syntaxhighlighter" class="brush: java; toolbar: false;">
	public abstract class CaffeineBeverageWithHook {
		void prepareRecipe() {
			boilWater();
			brew();
			pourInCup();
			if (customerWantsCondiments()) {
				addCondiments();
			}
		}
	 
		abstract void brew();
	 
		abstract void addCondiments();
	 
		void boilWater() {
			System.out.println("Boiling water");
		}
	 
		void pourInCup() {
			System.out.println("Pouring into cup");
		}
	 
		boolean customerWantsCondiments() {
			return true;
		}
	}
	</script>
	<p>El condicional que agregamos en el método template agrega los condimentos a no ser que se sobreescriba el método customerWantsCondiments() en la subclase y que devuelva false en alguna circunstancia.</p>
</section>
<section class="slide" id="template8">
	<h2>Template Method</h2>
	<h3>Usamos el hook</h3>
	<p>Para usar el hook sobreescribirmos el método customerWantsCondiments(). Este controla si va a correr cierta parte del algoritmo, en este caso si se va a ejecutar addCondiments()</p>
	<script type="syntaxhighlighter" class="brush: java; toolbar: false;">
		public class CoffeeWithHook extends CaffeineBeverageWithHook {
		 
			public void brew() {
				System.out.println("Dripping Coffee through filter");
			}
		 
			public void addCondiments() {
				System.out.println("Adding Sugar and Milk");
			}
		
			public boolean customerWantsCondiments() {
				String answer = getUserInput();

				if (answer.toLowerCase().startsWith("y")) {
					return true;
				} 
				else {
					return false;
				}
			}
		 
			private String getUserInput() {
				String answer = null;
				System.out.print("Would you like milk and sugar with your coffee (y/n)? ");
				BufferedReader in = new BufferedReader(new InputStreamReader(System.in));
				try {
					answer = in.readLine();
				} 
				catch (IOException ioe) {
					System.err.println("IO error trying to read your answer");
				}
				if (answer == null) {
					return "no";
				}
				return answer;
			}
		}
	</script>
</section>
<section class="slide" id="template9">
	<h2>Template Method</h2>
	<h3>Usamos el hook</h3>
	<p>Por último la clase test</p>
	<script type="syntaxhighlighter" class="brush: java; toolbar: false;">
		public class BeverageTestDrive {
			public static void main(String[] args) {
		 
				Tea tea = new Tea();
				Coffee coffee = new Coffee();
		 
				System.out.println("\nMaking tea...");
				tea.prepareRecipe();
		 
				System.out.println("\nMaking coffee...");
				coffee.prepareRecipe();

		 
				TeaWithHook teaHook = new TeaWithHook();
				CoffeeWithHook coffeeHook = new CoffeeWithHook();
		 
				System.out.println("\nMaking tea...");
				teaHook.prepareRecipe();
		 
				System.out.println("\nMaking coffee...");
				coffeeHook.prepareRecipe();
			}
		}
	</script>
</section>
<section class="slide" id="template10">
	<h2>Principio de diseño</h2>
	<h3>Principio Hollywood</h3>
	<h4>No nos llame, nosotros lo llamamos</h4>
	<p>Este principio nos da la manera de prevenir "dependecias podridas", que significa que tenemos componentes de alto nivel dependiendo en componentes de bajo nivel dependiendo en componentes de alto nivel que dependen en otros componentes y asi sucesitamentes.</p>
	<p>Con este principio permitimos a los componentes de bajo nivel engancharse en un sistema, pero el componente de alto nivel determina como y cuando se necesitan.</p>
	<p>El componente de alto nivel no quiere que lo llamen los de bajo nivel sino que el los llama.</p>
	<p>Los componentes de bajo nivel participan en el algoritmo pero el que los llama cuando los necesitas es el componente de alto nivel.</p>
</section>
<section class="slide" id="template73">
	<h2>Patron Template Method</h2>
	<p>Define el esqueleto de un algoritmo en un método definiendo pasos, y permite a las subclases proveer una implementación para alguno de estos pasos pero sin cambiar la estructura del algoritmo.</p>
	<ul>
		<li>Clasificación: Es un patrón de comportamiento</li>
		<li>Motivación: La implementeación de un algoritmo varia de acuerdo al entorno en que opera. Esto hace que se necesiten diferentes variantes del algoritmo.<BR/>
		El template method fija el orden de las operaciones, pero permite a las subclases variar esas operaciones.
		</li>
		<li>Aplicabilidad: 
			<ul>
				<li>Cuando contamos con un algoritmo con varios pasos que no cambian, de modo que dichos pasos invariantes serían implementados en una superclase, dejando la implementación de los pasos que cambian para las subclases.</li>
				<li>Para evitar la replicación de código mediante generalización: se factoriza el comportamiento común de varias subclases en una única superclase.</li>
				<li>Para controlar las extensiones de las subclases. El Método Plantilla utiliza métodos especiales (métodos de enganche o hooks) en ciertos puntos, siendo los únicos puntos que pueden ser redefinidos y, por tanto, los únicos puntos donde es posible la extensión.</li>
			</ul>	
		</li>
		<p>El metodo template es muy usando en frameworks, en estos se implementean las partes invariantes de la arquitectura, dejando lugar para las customizaciones</p>
	</ul>	
</section>
<section class="slide" id="iterator143">
	<h2>Patron Template Method</h2>
	<ul>
		<li>Participantes: 
		<ul>
			<li><strong>Clase Abstracta:</strong> proporciona la definición de una serie de operaciones primitivas (normalmente abstractas) que implementan los pasos de un algoritmo y que serán definidas en las subclases.<BR/>
			Se encarga también de la implementación de un método desde el cual son invocadas, entre otras, las operaciones primitivas. Dicho método actúa a modo de plantilla, de ahí el nombre de este patŕon, definiendo la secuencia de operaciones de un algoritmo.
			</li>
			<li><strong>Clase Concreta:</strong>implementa las operaciones primitivas definidas en la clase abstracta de la cual hereda, quedando así determinado el comportamiento específico del algoritmo definido en el método plantilla, para cada subclase.</li>
		</ul>	
		</li>
		<li>Consecuencias:
			<ul>
				<li>La utilización de este patrón es fundamental a la hora de reutilizar código.</li>
				<li>Se invierte el control: en este caso la superclase es la encargada de llamar a las operaciones definidas en las subclases.</li>
			</ul>
		</li>
	</ul>	
</section>
<section class="slide" id="iterator153">
	<h2>Patron Template Method</h2>
	<ul>
		<li>Estructura: 
			<img src="templateMethodClassDiagram.png"/>
		</li>
	</ul>	
</section>

<section class="slide" id="iterator188">
	<h2>Referencias</h2>
	<p><strong>Head First Design Patterns</strong></p>
	<a href="http://es.wikipedia.org/wiki/Template_Method_(patr%C3%B3n_de_dise%C3%B1o)">Template Method</a>
</section>

<!----------------------------------------------------------------------------------------------->
<!-- deck.navigation snippet -->
<a href="#" class="deck-prev-link" title="Previous">&#8592;</a>
<a href="#" class="deck-next-link" title="Next">&#8594;</a>

<!-- deck.status snippet -->
<p class="deck-status">
	<span class="deck-status-current"></span>
	/
	<span class="deck-status-total"></span>
</p>

<!-- deck.goto snippet -->
<form action="." method="get" class="goto-form">
	<label for="goto-slide">Go to slide:</label>
	<input type="text" name="slidenum" id="goto-slide" list="goto-datalist">
	<datalist id="goto-datalist"></datalist>
	<input type="submit" value="Go">
</form>

<!-- deck.hash snippet -->
<a href="." title="Permalink to this slide" class="deck-permalink">#</a>


<!-- Grab CDN jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../jquery-1.7.2.min.js"><\/script>')</script>

<!-- Deck Core and extensions -->
<script src="../core/deck.core.js"></script>
<script src="../extensions/hash/deck.hash.js"></script>
<script src="../extensions/menu/deck.menu.js"></script>
<script src="../extensions/goto/deck.goto.js"></script>
<script src="../extensions/status/deck.status.js"></script>
<script src="../extensions/navigation/deck.navigation.js"></script>
<script src="../extensions/scale/deck.scale.js"></script>

<!-- Initialize the deck -->
<script>
$(function() {
	$.deck('.slide');
});
</script>

</body>



</html>
